<template>
	<view class="pages-order" v-if="detail.id">
		<view class="detail-status fill-base flex-y-center">
			<view class="flex-1" style="padding:0 50rpx;">
				<view class="flex-between flex-1">
					<view v-if="refund == 1" class="f-sm-title text-bold" :style="{color: primaryColor}">{{refundType[detail.refund.status].name}}</view>
					<view v-else class="f-sm-title text-bold" :style="{color: primaryColor}">{{statusType[detail.status].name}}</view>
					<min-countdown v-if="detail.status == 1 && detail.over_time > 0" :targetTime="detail.over_time * 1000" @callback="countEnd" formatType="1"
					:isPlay="true" :type="1" style="height: 46rpx;color: #FF2404;"></min-countdown>
				</view>
				<block v-if="refund == 0">
					<view class="f-paragraph" v-if="detail.status == 1">请支付后服务人员接单</view>
					<view class="f-paragraph" v-if="detail.status == 5">等待师傅接单</view>
					<view class="f-paragraph" v-if="detail.demand_fee_switch && detail.type == 3">联系下单人支付服务费</view>
				</block>
			</view>
		</view>
		<!-- <view class="mt-md fill-base pl-lg pr-lg  ml-md mr-md radius-16 pt-md pb-md" v-if="detail.coach_id">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">接单人信息</text>
			</view>
			<view class="flex-between pt-md pb-md">
				<image :src="detail.coach_info.work_img" mode="aspectFill" class="detail-image"></image>
				<view class="flex-center">
					<view class="f-title pr-lg">{{detail.coach_info.name}}</view>
					<i class="iconfont icondianhua" @tap="$util.goUrl({url: detail.coach_info.mobile, openType: 'call'})"></i>
				</view>
			</view>
		</view> -->
		<view class="mt-md fill-base pl-lg pr-lg ml-md mr-md radius-16 pt-md pb-md">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">订单类型</text>
				<text class="f-desc c-icontext">需求订单（{{orderType[detail.type].name}}）</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">预约时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.start_time*1000, 'YY-M-D h:m')}}</text>
			</view>
		</view>
		<view class="mt-md fill-base pl-lg pr-lg  ml-md mr-md radius-16 pt-md pb-md">
			<block v-if="detail.type == 3">
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">家政公司联系人</text>
					<view class="flex-center">
						<text class="f-desc c-icontext ">{{detail.company_user_name}}</text>
					</view>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">家政公司联系电话</text>
					<!-- <text class="f-desc c-icontext">{{detail.address_info.mobile}}</text> -->
					<view class="flex-center">
						<i class="iconfont icondianhua" @tap="$util.goUrl({url: detail.company_mobile, openType: 'call'})"></i>
					</view>
				</view>
			</block>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">联系人姓名</text>
				<text class="f-desc c-icontext">{{detail.custom_name}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">联系电话</text>
				<view class="flex-center">
					<i class="iconfont icondianhua" @tap="$util.goUrl({url: detail.custom_mobile, openType: 'call'})"></i>
				</view>
				<!-- <text class="f-desc c-icontext">{{detail.custom_mobile}}</text> -->
			</view>
			<view class="pt-md pb-md flex">
				<text class="f-paragraph c-mini-title">服务地址</text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500" >{{detail.address + detail.address_info}}</text>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pl-lg pr-lg  ml-md mr-md radius-16 pt-md pb-md">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">服务标题</text>
				<text class="f-desc c-icontext">{{detail.title}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">服务类别</text>
				<text class="f-desc c-icontext">{{detail.f_name + '/' + detail.s_type}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">详细描述</text>
				<text class="f-desc c-icontext max-500">{{detail.introduce}}</text>
			</view>
			<view class="pt-md pb-md" v-if="detail.img.length > 0">
				<text class="f-paragraph c-mini-title">图片补充</text>
				<view class="flex-1 pt-md">
					<upload :imagelist="detail.img" text="上传图片" :imageSee="true" imgclass="mini"
						:imgsize="detail.img.length" :pictureSize="5">
					</upload>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pd-lg pr-lg pt-md pb-md ml-md mr-md radius-16">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">订单编号</text>
				<view class="flex-center">
					<text class="f-desc c-icontext pr-sm">{{detail.order_code}}</text>
					<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: detail.order_code,openType: 'copy'})"
					:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
				</view>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">下单时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.create_time*1000, '')}}</text>
			</view>
		</view>
		<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付方式</text>
				<text class="f-desc c-icontext">{{detail.demand_fee_switch == 1 && detail.type == 3 ? '额度支付' : '微信支付'}}</text>
			</view>
			<view class="pt-md pb-md flex-between" v-if="detail.type != 3">
				<text class="f-paragraph c-mini-title">上门费</text>
				<text class="f-desc c-warning text-bold">¥{{detail.door_money || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">服务费</text>
				<text class="f-desc c-warning text-bold">¥{{detail.price || 0}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付金额</text>
				<text class="f-desc c-warning text-bold">¥{{(detail.price*1 + detail.door_money*1).toFixed(2)}}</text>
			</view>
			<view class="pt-md pb-md flex-between" v-if="detail.type == 1">
				<text class="f-paragraph c-mini-title">预估价格</text>
				<text class="f-desc c-warning text-bold">¥{{detail.es_price}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">支付状态</text>
				<text class="f-desc c-icontext" v-if="detail.status == -1">支付失败</text>
				<text class="f-desc c-icontext" v-else-if="detail.status == 1">未支付</text>
				<text class="f-desc c-icontext" v-else>支付成功</text>
			</view>
		</view>
		<view class="f-caption c-caption pl-lg pr-lg pt-md" v-if="detail.status == 1 && detail.type == 3">温馨提示：额度如已低于最低额度 {{detail.price}}，请联系管理员增加额度</view>
		<view class="mt-md fill-base pd-lg pr-lg pt-md pb-lg" v-if="detail.refund">
			<view class="pt-md pb-md flex-between" v-if="detail.refund.refund_code">
				<text class="f-paragraph c-mini-title">退款编号</text>
				<view class="flex-center">
					<text class="f-desc c-icontext pr-sm">{{detail.refund.refund_code}}</text>
					<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: detail.refund.refund_code,openType: 'copy'})"
					:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
				</view>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">退款时间</text>
				<text class="f-desc c-icontext">{{$util.formatTime(detail.refund.create_time*1000, '')}}</text>
			</view>
			<view class="pt-md pb-md flex-between">
				<text class="f-paragraph c-mini-title">取消方式</text>
				<text class="f-desc c-icontext">{{detail.cancel_type == 1 ? '用户取消' : '后台取消'}}</text>
			</view>
			<view class="pt-md pb-md flex" v-if="detail.refund.content">
				<text class="f-paragraph c-mini-title">退款说明</text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500 ">{{detail.refund.content}}</text>
				</view>
			</view>
			<view class="pb-md flex" v-if="detail.refund.text">
				<text class="f-paragraph c-mini-title"></text>
				<view class="flex-1 flex" style="justify-content: flex-end;">
					<text class="f-desc c-icontext max-500 pre-wrap">{{detail.refund.text}}</text>
				</view>
			</view>
		</view>
		<view class="mt-md fill-base pr-lg pl-lg pt-sm pb-sm ml-md mr-md radius-16" v-if="detail.order_check_img">
			<view class="f-paragraph c-mini-title pt-md pb-md">服务完成凭证</view>
			<view class="">
				<upload :imagelist="detail.order_check_img" text="上传图片" :imageSee="true" imgclass="mini"
					:imgsize="detail.order_check_img.length" :pictureSize="5">
				</upload>
			</view>
		</view>
		<!--补差价-->
		<block v-if="detail.add_price_list">
			<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
				<block v-for="(item,index) in detail.add_price_list" :key="index">
					<view class="pt-md pb-md flex-between">
						<text class="f-paragraph c-mini-title">补差价订单编号</text>
						<view class="flex-center flex-1 pl-lg">
							<text class="f-desc c-icontext pr-sm flex-1" style="word-break:break-all">{{item.order_code}}</text>
							<view class="flex-center f-icontext copy-btn pl-sm pr-sm" @tap="$util.goUrl({url: item.order_code,openType: 'copy'})"
							:style="{color:primaryColor,border: `1px solid ${primaryColor}` }">复制</view>
						</view>
					</view>
					<view class="pt-md pb-md flex-between">
						<text class="f-paragraph c-mini-title">补单时间</text>
						<text class="f-desc c-icontext">{{$util.formatTime(item.create_time*1000, '')}}</text>
					</view>
					<view class="pt-md pb-md flex-between">
						<text class="f-paragraph c-mini-title">补单类型</text>
						<text class="f-desc c-icontext">{{item.text}}</text>
					</view>
					<view class="pt-md pb-md flex-between" v-if="item.text_info">
						<text class="f-paragraph c-mini-title">补单备注</text>
						<text class="f-desc c-icontext">{{item.text_info}}</text>
					</view>
				</block>
			</view>
			<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">补单支付方式</text>
					<text class="f-desc c-icontext">微信支付</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">支付金额</text>
					<text class="f-desc c-warning">￥{{detail.add_price_list[0].pay_price}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">支付状态</text>
					<text class="f-desc c-icontext">支付成功</text>
				</view>
			</view>
			<view class="mt-md fill-base pr-lg pl-lg pt-md pb-md ml-md mr-md radius-16">
				<view class="pt-md pb-md f-title text-bold c-title">支付明细</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">订单金额总计</text>
					<text class="f-desc c-warning text-bold">￥{{detail.pay_price}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">补单金额总计</text>
					<text class="f-desc c-warning text-bold">￥{{detail.add_price_list[0].pay_price}}</text>
				</view>
				<view class="pt-md pb-md flex-between">
					<text class="f-paragraph c-mini-title">支付金额总计</text>
					<text class="f-title c-warning text-bold">￥{{Number((detail.add_price_list[0].pay_price*1 + detail.pay_price*1).toFixed(2))}}</text>
				</view>
			</view>
		</block>
		<view class="pd-lg f-desc c-warning" v-if="detail.type == 3">
			*温馨提示：家政公司订单需要在服务完成后由家政公司支付服务费用给服务人员，平台不参与支付和售后工作，平台提供平台为双方建立服务建联，所有安全问题，服务问题均与平台无关。
		</view>
		
		<uni-popup ref="order_box" type="center" :custom="true">
			<view class="order-box fill-base pl-lg pr-lg radius-16 pt-md pb-lg">
				<view class="f-title flex-center h-80 text-bold rel">验收
					<i class="iconfont iconguanbi abs" style="right: 0;color: #ccc;" @tap="$refs.order_box.close()"></i>
				</view>
				<view class="f-paragraph pb-lg pt-lg">请上传完成图片</view>
				<view class="pb-lg flex-center">
					<upload @upload="imgUpload" @del="imgUpload" :imagelist="form.order_check_img" imgtype="order_check_img" text="上传图片" :imgsize="9"
						:pictureSize="5" imgclass="mini">
					</upload>
				</view>
				<view class="flex-center pb-lg pt-lg">
					<view class="radius-10 service-btn flex-center f-desc"
					:style="{color: `#fff`, background: primaryColor}" 
					@tap.stop="changeOrder('upload')">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<view class="space-max-footer"></view>
		<fixed position="bottom">
			<view class="fill-base pl-lg pr-lg b-1px-t" v-if="refund == 0 && ![10].includes(detail.status)">
				<view class="flex-y-center pt-md pb-md" style="justify-content: flex-end;">
					<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md" style="border: 1px solid #D1D1D1;"
					@tap.stop="changeOrder('cancel')" v-if="detail.can_cancel == 1">取消订单</view>
					<view class="radius-10 order-btn flex-center f-desc ml-md pl-md pr-md"
					:style="{border: `1px solid ${primaryColor}`, color: primaryColor}" 
					v-if="[9].includes(detail.status) && detail.type != 3 && !detail.add_price_list"
					@tap.stop="setDifference">{{detail.is_add == 1 ? `查看补差价` : `申请补差价`}}</view>
					<view class="radius-10 order-btn flex-center f-desc ml-md"
					:style="{color: `#fff`, background: primaryColor}" v-if="[6,7,8,9].includes(detail.status)"
					@tap.stop="changeOrder('')">{{statusButton[detail.status]}}</view>
				</view>
				<view class="space-safe"></view>
			</view>
			<view class="fill-base pl-lg pr-lg b-1px-t" v-if="refund == 1 && detail.refund.status == 1">
				<view class="flex-y-center pt-md pb-md" style="justify-content: flex-end;">
					<view class="radius-10 order-btn cancel-btn flex-center f-desc" @tap.stop="toRefundCancel">取消售后</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</fixed>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	
	export default {
		data() {
			return {
				form: {
					order_check_img: []
				},
				statusType: {
					'-2': {name: '已退款', color: '#FF2404'},
					'-1': {name: '已取消', color: '#FF2404'},
					1: {name: '待支付', color: '#FF2404'},
					2: {name: '待审核', color: '#FF6E00'},
					3: {name: '已驳回', color: '#666666'},
					4: {name: '已通过', color: '#24C858'},
					5: {name: '待接单', color: '#FF6E00'},
					6: {name: '待上门', color: '#FF6E00'},
					7: {name: '已出发', color: '#FF6E00'},
					8: {name: '已到达', color: '#FF6E00'},
					9: {name: '服务中', color: '#24C858'},
					10: {name: '服务完成', color: '#24C858'},
					11: {name: '订单完成', color: '#666666'}
				},
				refundType: {
					1: {name: '待审核', color: '#FF2404'},
					2: {name: '已通过', color: '#24C858'},
					3: {name: '已驳回', color: '#666666'}
				},
				orderType: {
					1: {name: '咨询', type: '订金'},
					2: {name: '一口价', type: '全款'},
					3: {name: '家政公司', type: '全款'}
				},
				statusButton: {
					6: '马上出发',
					7: '已到达',
					8: '开始服务',
					9: '服务完成'
				},
				options: {},
				lockTap: false,
				detail: {},
				payModel: {
					1: '微信支付'
				},
				refund: 0
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			coachInfo: state => state.user.coachInfo,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.refund = options.refund || 0
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				this.getOrderInfo()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh(){
				this.$util.showLoading()
				this.initIndex(true)
			},
			async getOrderInfo(){
				let module = this.refund == 0 ? 'demandInfo' : 'refundInfo'
				let data = await this.$api.demand[module]({id: this.options.id})
				if(data.img){
					data.img = data.img.split(',').map(item => {
						return {path: item}
					})
				}
				if(data.order_check_img){
					data.order_check_img = data.order_check_img.split(',').map(item => {
						return {path: item}
					})
				}
				this.detail = data
				this.$util.hideAll()
			},
			// 完成订单
			async endOrder(index){
				let {
					id
				} = this.detail
				await this.$api.order.endOrder({
					id
				})
				this.$util.showToast({
					title: `已完成`
				})
				this.initRefresh()
				this.$util.back()
			},
			async changeOrder(type = ''){
				let {
					id,
					status,
					order_type
				} = this.detail
				let param = {
					id,
					status
				}
				if(status == 9 && this.configInfo.coach_end_order_upload && !type){ // 服务完成 是否上传图片
					this.$refs.order_box.open()
					return
				}
				// 图片上传
				let form = this.$util.deepCopy(this.form)
				if(type == 'upload' && form.order_check_img.length > 0){
					param.order_check_img = form.order_check_img.map(item => {
						return item.path
					})
				}
				param.status = param.status + 1
				if(type == 'cancel'){
					this.$util.goUrl({openType: 'call', url: this.coachInfo.service_tel})
					return
				}
				this.$util.showLoading()
				await this.$api.demand.updateOrderStatus(param)
				this.$refs.order_box.close()
				this.$util.hideAll()
				this.$util.showToast({
					title: '操作成功'
				})
				this.getOrderInfo()
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			// 补差价
			setDifference(){
				let {
					id,
					is_add = 0
				} = this.detail
				this.$util.goUrl({url: `/demand/pages/order/difference?id=${id}&is_add=${is_add}`})
			},
			// 取消售后
			async toRefundCancel(index){
				let [res_del, {
					confirm
				}] = await uni.showModal({
					content: `请确认是否要取消售后`,
				})
				if (!confirm) return;
				let {
					id
				} = this.detail.refund
				await this.$api.order.cancelRefund({
					id
				})
				this.initRefresh()
				this.$util.back()
				this.$util.showToast({
					title: `取消成功`
				})
			},
			// 取消
			async toCancel() {
				let [res_del, {
					confirm
				}] = await uni.showModal({
					content: `请确认是否要取消订单`,
				})
				if (!confirm) return;
				let {
					id
				} = this.detail
				await this.$api.demand.cancelOrder({
					id
				})
				this.$util.showToast({
					title: `取消成功`
				})
				setTimeout(()=> {
					this.$util.back()
					this.$util.goUrl({url: 1 ,openType: 'navigateBack'})
				},1500)
			},
			countEnd(){
				this.initRefresh()
			},
			// 去支付
			async toPay() {
				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				let {
					id,
					pay_model = 1
				} = this.detail
			
				try {
					let {
						pay_list
					} = await this.$api.demand.rePayOrder({
						id
					})
					this.$util.hideAll()
					if (pay_list) {
						if (pay_model == 3) {
							pay_list = {
								orderInfo: pay_list,
								provider: 'alipay'
							}
						}
			
						try {
							await this.$util.pay(pay_list)
							this.$util.showToast({
								title: `支付成功`
							})
							this.initRefresh()
							this.$util.back()
							this.lockTap = false;
						} catch (e) {
							this.$util.showToast({
								title: `支付失败`
							})
							this.lockTap = false;
							return
						}
					}
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			},
		},
	}
</script>


<style lang="scss">
	.pages-order {
		.detail-status{
			height: 160rpx;
		}
		.detail-image{
			width: 94rpx;
			height: 94rpx;
			border-radius: 94rpx;
		}
		
		.order-image{
			width: 160rpx;
			height: 160rpx;
		}
		.order-btn{
			min-width: 152rpx;
			height: 62rpx;
			color: #5B5B5B;
		}
		.cancel-btn{
			border: 1px solid #979797;
		}
		.copy-btn{
			border-radius: 4px;
		}
		
		.order-box{
			width: 690rpx;
			.service-btn{
				width: 222rpx;
				height: 62rpx;
				color: #5B5B5B;
			}
		}
	}
</style>
